<template>
	<view :class="currentTheme">
		<a-nabbar name="店家票绑定"/>
		<view class="u-padding-32">
			<view  v-for="(item,index) in data" :key="index" class="u-margin-bottom-20">
				<item-box padding="0"  >
					<view class="u-padding-left-60">
						<view class="u-flex u-border-bottom ticket-name">
							<text class="u-font-32 content-desc-item">{{item.typeName}}：</text>
							<text class="u-font-30 text-order-time">{{item.number}}</text>
						</view>
						<view class="u-flex u-margin-top-16 u-padding-right-20 u-padding-bottom-16">
							<u-input height="64" v-model="item.phone" type="number" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" 
							placeholder="请输入手机号" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
							<view class="u-margin-left-24">
								<item-btn width="200" height="64" @click="checked(item,index)">绑定</item-btn>
							</view>
						</view>
					</view>
				</item-box>
			</view>
			<empty v-if="data.length===0"></empty>
		</view>
	</view>
</template>

<script>
	import {getDetail,add} from '@/api/crud.js'
	import empty from '@/components/mescroll-uni/components/mescroll-empty.vue'
	export default {
		data() {
			return {
				data:[],
				apModule:"shopApi",
				apiType:"user",
			};
		},
		components: {
			empty
		},
		onLoad() {
			getDetail({},this.apiType,this.apModule,'getHelpTickets').then(res=>{
				this.data = res.map(val=>{
					val.typeName = {'store':"店家票"}[val.userType]
					return val;
				})
			})
		},
		methods:{
			checked(item,index){
				if(!item.phone){
					this.$u.toast('请输入手机号')
					return false;
				}
				
				add(item.phone,this.apiType,this.apModule,`saveHelpTicket/${item.id}`).then(res=>{
					this.$set(item,'phone','')
					this.$set(item,'hidden',true)
					this.$u.toast('绑定成功')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.ticket-name{
	height: 100rpx;
}
</style>
